<template>
  <div class="Head">
    <h1>小红窝</h1>
    <ul>
      <li>
        <router-link to="/" class="link">首页</router-link>
      </li>
      <li>
        <router-link to="/news" class="link">资讯</router-link>
      </li>
      <li>
        <router-link to="/topic" class="link">话题</router-link>
      </li>
      <li>
        <router-link to="/technology" class="link">技术站</router-link>
      </li>
      <li>
        <router-link to="/life" class="link">生活圈</router-link>
      </li>
    </ul>
    <div class="login">
      <span>注册</span>
      <span>登陆</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Head"
    }
</script>

<style scoped>
  .Head{
    position:fixed;
    top:0;
    left:0;
    background-color: white;
    z-index: 5;
    width: 100%;
    font-size:10px;
    height:65px;
    box-shadow: 0px 2px 3px rgba(193, 182, 165, 0.84);
  }
  .Head h1{
    position: relative;
    color: #cc0505;
    font-size: 29px;
    font-weight: bolder;
    display: inline-block;
    margin-left: 8%;
    float: left;
  }
  .Head ul{
    display: inline-block;
    padding: 0px;
    float: left;
    margin: 15px 0% 0% 8%;
    width: 49%;

  }
  .Head li{
    position: relative;
    margin: 0% 2%;
    float: left;
    list-style: none;
    padding:10px;
  }
  .link {
    color: black;
    text-decoration: none;
    font-size: 15px;
  }
  .login{
    display: inline-block;
    float: right;
    margin: 25px 2%;
  }
  .login span{
    position: relative;
    font-size: 15px;
    padding:10px;
    width: 13%;
  }
</style>
